<template>
  <div class="help-page">
    <div class="help-header">
      <div class="header-content">
        <h1 class="help-title">
          <i class="el-icon-question"></i>
          帮助与支持中心
        </h1>
        <p class="help-subtitle">在这里找到您需要的所有帮助信息</p>
      </div>
    </div>

    <div class="help-container">
      <!-- 快速导航 -->
      <div class="quick-nav">
        <h3>快速导航</h3>
        <div class="nav-buttons">
          <el-button 
            v-for="category in categories" 
            :key="category.id"
            :type="activeCategory === category.id ? 'primary' : 'primary'" 
            :plain="activeCategory !== category.id"
            @click="scrollToCategory(category.id)"
            class="nav-btn"
            :class="{ 'active-nav': activeCategory === category.id }"
          >
            <i :class="category.icon"></i>
            {{ category.name }}
          </el-button>
        </div>
      </div>

      <!-- FAQ内容 -->
      <div class="faq-content">
        <div v-for="category in categories" :key="category.id" :id="category.id" class="faq-category">
          <div class="category-header">
            <h2>
              <i :class="category.icon"></i>
              {{ category.name }}
            </h2>
            <p class="category-description">{{ category.description }}</p>
          </div>

          <el-collapse v-model="activeNames" accordion class="faq-collapse">
            <el-collapse-item 
              v-for="(faq, index) in category.faqs" 
              :key="index"
              :name="category.id + '-' + index"
              class="faq-item"
            >
              <template slot="title">
                <div class="faq-question">
                  <span class="question-number">{{ index + 1 }}</span>
                  <span class="question-text">{{ faq.question }}</span>
                </div>
              </template>
              <div class="faq-answer">
                <div v-html="faq.answer"></div>
                <div v-if="faq.tips" class="faq-tips">
                  <i class="el-icon-lightbulb"></i>
                  <strong>提示：</strong>{{ faq.tips }}
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>

      <!-- 联系支持 -->
      <div class="contact-support">
        <h3>还需要帮助？</h3>
        <p>如果您没有找到答案，请联系我们的技术支持团队</p>
        <div class="contact-methods">
          <el-button type="primary" icon="el-icon-message">
            在线客服
          </el-button>
          <el-button type="success" icon="el-icon-phone">
            电话支持
          </el-button>
          <el-button type="warning" icon="el-icon-document">
            提交工单
          </el-button>
        </div>
      </div>
    </div>

    <!-- 返回顶部按钮 -->
    <el-backtop 
      :right="40" 
      :bottom="40"
      class="back-to-top"
    >
      <div class="back-to-top-content">
        <i class="el-icon-top"></i>
      </div>
    </el-backtop>
  </div>
</template>

<script>
export default {
  name: 'HelpPage',
  data() {
    return {
      activeNames: [],
      activeCategory: '', // 当前活动的分类
      categories: [
        {
          id: 'getting-started',
          name: '快速开始',
          icon: 'el-icon-star-on',
          description: '了解如何开始使用我们的系统',
          faqs: [
            {
              question: '如何上传PDF文件？',
              answer: `
                <p>上传PDF文件的步骤如下：</p>
                <ol>
                  <li>点击左侧文件列表中的"上传"按钮</li>
                  <li>选择您要上传的PDF文件</li>
                  <li>等待文件上传完成</li>
                  <li>文件将自动出现在文件列表中</li>
                </ol>
                <p>支持的文件格式：PDF（最大50MB）</p>
              `,
              tips: '建议使用Chrome或Firefox浏览器以获得最佳体验'
            },
            {
              question: '如何查看PDF内容？',
              answer: `
                <p>查看PDF内容的方法：</p>
                <ul>
                  <li>在文件列表中点击PDF文件名</li>
                  <li>系统会自动在PDF预览区域显示内容</li>
                  <li>可以使用缩放控制调整显示大小</li>
                  <li>支持页面跳转和搜索功能</li>
                </ul>
              `,
              tips: '如果PDF加载较慢，请检查网络连接'
            },
            {
              question: '如何开始AI对话？',
              answer: `
                <p>开始AI对话的步骤：</p>
                <ol>
                  <li>选择要讨论的PDF文件</li>
                  <li>在右侧聊天区域输入您的问题</li>
                  <li>点击"发送"按钮或按回车键</li>
                  <li>AI将根据PDF内容回答您的问题</li>
                </ol>
              `,
              tips: 'AI对话会保存历史记录，您可以随时查看之前的对话'
            }
          ]
        },
        {
          id: 'pdf-features',
          name: 'PDF功能',
          icon: 'el-icon-document',
          description: 'PDF查看和操作相关功能',
          faqs: [
            {
              question: '如何调整PDF缩放比例？',
              answer: `
                <p>调整PDF缩放的方法：</p>
                <ul>
                  <li>使用PDF预览区域上方的缩放控制按钮</li>
                  <li>点击"+"放大，点击"-"缩小</li>
                  <li>点击"重置"恢复原始大小</li>
                  <li>支持0.5x到3x的缩放范围</li>
                </ul>
              `,
              tips: '缩放设置会在当前会话中保持'
            },
            {
              question: '如何在不同页面间跳转？',
              answer: `
                <p>页面跳转功能：</p>
                <ul>
                  <li>使用PDF预览区域下方的页面控制</li>
                  <li>输入页码直接跳转到指定页面</li>
                  <li>使用左右箭头按钮逐页浏览</li>
                  <li>显示当前页码和总页数</li>
                </ul>
              `,
              tips: '页面跳转会保持当前的缩放比例'
            },
            {
              question: 'PDF预览支持哪些功能？',
              answer: `
                <p>PDF预览支持的功能：</p>
                <ul>
                  <li>高质量缩放和渲染</li>
                  <li>页面跳转和导航</li>
                  <li>文本选择和复制</li>
                  <li>搜索功能（部分支持）</li>
                  <li>响应式布局适配</li>
                </ul>
              `,
              tips: '基于PDF.js技术，提供流畅的浏览体验'
            }
          ]
        },
        {
          id: 'ai-chat',
          name: 'AI对话',
          icon: 'el-icon-chat-dot-round',
          description: 'AI智能对话功能使用指南',
          faqs: [
            {
              question: 'AI对话如何工作？',
              answer: `
                <p>AI对话的工作原理：</p>
                <ol>
                  <li>AI会分析您选择的PDF文件内容</li>
                  <li>根据文件内容回答您的问题</li>
                  <li>支持数学公式和复杂概念解释</li>
                  <li>提供流式回复，实时显示回答过程</li>
                </ol>
              `,
              tips: 'AI回答的质量取决于PDF内容的清晰度和完整性'
            },
            {
              question: '如何设置AI上下文？',
              answer: `
                <p>设置AI上下文的方法：</p>
                <ol>
                  <li>在聊天区域点击"设置"按钮</li>
                  <li>在弹出的对话框中输入上下文信息</li>
                  <li>点击"确定"保存设置</li>
                  <li>后续对话将包含这些上下文信息</li>
                </ol>
              `,
              tips: '上下文设置可以帮助AI更好地理解您的需求'
            },
            {
              question: '如何管理对话历史？',
              answer: `
                <p>对话历史管理：</p>
                <ul>
                  <li>对话历史会自动保存</li>
                  <li>点击"新建"开始新的对话</li>
                  <li>历史对话会按PDF文件分类</li>
                  <li>支持查看和恢复之前的对话</li>
                </ul>
              `,
              tips: '建议定期清理不需要的对话历史以节省空间'
            },
            {
              question: 'AI支持哪些类型的回答？',
              answer: `
                <p>AI支持的回答类型：</p>
                <ul>
                  <li>文本解释和总结</li>
                  <li>数学公式和计算</li>
                  <li>代码示例和说明</li>
                  <li>图表和概念解释</li>
                  <li>多语言翻译</li>
                </ul>
              `,
              tips: 'AI会显示思考过程，帮助您理解回答的逻辑'
            }
          ]
        },
        {
          id: 'markdown',
          name: 'Markdown功能',
          icon: 'el-icon-edit-outline',
          description: 'Markdown文档查看和编辑',
          faqs: [
            {
              question: '如何查看Markdown文件？',
              answer: `
                <p>查看Markdown文件：</p>
                <ol>
                  <li>在文件列表中选择Markdown文件</li>
                  <li>系统会自动在Markdown区域显示渲染后的内容</li>
                  <li>支持语法高亮和格式化显示</li>
                  <li>支持数学公式和图表</li>
                </ol>
              `,
              tips: 'Markdown文件支持实时预览和编辑'
            },
            {
              question: 'Markdown支持哪些语法？',
              answer: `
                <p>支持的Markdown语法：</p>
                <ul>
                  <li>标题（# ## ###）</li>
                  <li>粗体和斜体（**粗体** *斜体*）</li>
                  <li>列表（有序和无序）</li>
                  <li>链接和图片</li>
                  <li>代码块和行内代码</li>
                  <li>表格和引用</li>
                  <li>数学公式（LaTeX）</li>
                </ul>
              `,
              tips: '使用$$包围数学公式，使用$包围行内公式'
            }
          ]
        },
        {
          id: 'troubleshooting',
          name: '故障排除',
          icon: 'el-icon-warning',
          description: '常见问题和解决方案',
          faqs: [
            {
              question: 'PDF文件无法加载怎么办？',
              answer: `
                <p>PDF加载问题的解决方案：</p>
                <ol>
                  <li>检查文件是否损坏或过大</li>
                  <li>尝试重新上传文件</li>
                  <li>清除浏览器缓存</li>
                  <li>检查网络连接</li>
                  <li>尝试使用不同的浏览器</li>
                </ol>
              `,
              tips: '如果问题持续存在，请联系技术支持'
            },
            {
              question: 'AI对话没有响应怎么办？',
              answer: `
                <p>AI对话问题的解决方案：</p>
                <ol>
                  <li>检查网络连接</li>
                  <li>确认PDF文件已正确加载</li>
                  <li>尝试重新发送问题</li>
                  <li>检查问题是否过于复杂</li>
                  <li>刷新页面重新开始</li>
                </ol>
              `,
              tips: 'AI响应时间可能因问题复杂度而异'
            },
            {
              question: '页面显示异常怎么办？',
              answer: `
                <p>页面显示问题的解决方案：</p>
                <ol>
                  <li>刷新浏览器页面</li>
                  <li>清除浏览器缓存和Cookie</li>
                  <li>检查浏览器是否支持JavaScript</li>
                  <li>尝试使用Chrome或Firefox</li>
                  <li>检查屏幕分辨率设置</li>
                </ol>
              `,
              tips: '建议使用最新版本的浏览器'
            }
          ]
        }
      ]
    }
  },
  methods: {
    scrollToCategory(categoryId) {
      console.log('点击导航按钮:', categoryId);
      const element = document.getElementById(categoryId);
      if (element) {
        console.log('找到元素:', element);
        // 简单的滚动到元素位置
        element.scrollIntoView({ 
          behavior: 'smooth',
          block: 'start'
        });
        
        // 添加视觉反馈
        element.style.transition = 'all 0.3s ease';
        element.style.transform = 'scale(1.02)';
        element.style.boxShadow = '0 8px 30px rgba(0, 0, 0, 0.15)';
        
        // 移除视觉反馈
        setTimeout(() => {
          element.style.transform = '';
          element.style.boxShadow = '';
        }, 500);
        
        // 更新当前活动分类
        this.activeCategory = categoryId;
      } else {
        console.error('未找到元素:', categoryId);
      }
    },
    
    // 监听滚动事件，更新当前活动分类
    handleScroll() {
      const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
      const headerHeight = 80;
      
      // 找到当前可见的分类
      this.categories.forEach(category => {
        const element = document.getElementById(category.id);
        if (element) {
          const elementTop = element.offsetTop - headerHeight - 50;
          const elementBottom = elementTop + element.offsetHeight;
          
          if (scrollPosition >= elementTop && scrollPosition < elementBottom) {
            // 更新当前活动分类
            this.activeCategory = category.id;
          }
        }
      });
    },
    testScroll() {
      console.log('测试滚动功能');
      this.scrollToCategory('getting-started');
    }
  },
  
  mounted() {
    // 添加滚动监听器
    window.addEventListener('scroll', this.handleScroll);
    
    // 初始化当前活动分类
    this.$nextTick(() => {
      this.handleScroll();
    });
  },
  
  beforeDestroy() {
    // 移除滚动监听器
    window.removeEventListener('scroll', this.handleScroll);
  }
}
</script>

<style scoped>
.help-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  /* 确保页面可以正常滚动 */
  overflow-x: hidden;
  /* 移除可能影响滚动的属性 */
  position: relative;
}

/* 确保body和html也支持平滑滚动 */
html, body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.help-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.help-title {
  font-size: 2.5rem;
  margin: 0 0 20px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.help-title i {
  font-size: 2.8rem;
  color: #ffd700;
}

.help-subtitle {
  font-size: 1.2rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 300;
}

.help-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.quick-nav {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.quick-nav h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 1.4rem;
  font-weight: 600;
}

.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.nav-btn {
  border-radius: 25px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.active-nav {
  background: #409eff;
  color: white;
}

.faq-content {
  margin-bottom: 40px;
}

.faq-category {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.faq-category:hover {
  transform: translateY(-2px);
}

.category-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.category-header h2 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 1.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-header h2 i {
  color: #409eff;
  font-size: 1.6rem;
}

.category-description {
  margin: 0;
  color: #666;
  font-size: 1rem;
  line-height: 1.6;
}

.faq-collapse {
  border: none;
}

.faq-item {
  margin-bottom: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);
}

.faq-question {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 5px 0;
}

.question-number {
  background: #409eff;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 20px;
}

.question-text {
  font-weight: 500;
  color: #2c3e50;
  font-size: 1rem;
  line-height: 1.5;
}

.faq-answer {
  padding: 20px;
  background: #f8f9fa;
  border-top: 1px solid #e4e7ed;
  line-height: 1.8;
  color: #2c3e50;
}

.faq-answer p {
  margin: 0 0 15px 0;
}

.faq-answer ul, .faq-answer ol {
  margin: 0 0 15px 0;
  padding-left: 20px;
}

.faq-answer li {
  margin-bottom: 8px;
}

.faq-tips {
  margin-top: 20px;
  padding: 15px;
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  border-left: 4px solid #ffc107;
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.faq-tips i {
  color: #ffc107;
  font-size: 1.2rem;
  margin-top: 2px;
}

.contact-support {
  background: white;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact-support h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 1.6rem;
  font-weight: 600;
}

.contact-support p {
  margin: 0 0 30px 0;
  color: #666;
  font-size: 1.1rem;
}

.contact-methods {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.contact-methods .el-button {
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.contact-methods .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 返回顶部按钮样式 */
.back-to-top {
  z-index: 1000;
}

.back-to-top-content {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.back-to-top-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .help-title {
    font-size: 2rem;
    flex-direction: column;
    gap: 10px;
  }
  
  .help-title i {
    font-size: 2.2rem;
  }
  
  .nav-buttons {
    justify-content: center;
  }
  
  .contact-methods {
    flex-direction: column;
    align-items: center;
  }
  
  .contact-methods .el-button {
    width: 200px;
  }
}

@media (max-width: 480px) {
  .help-container {
    padding: 20px 15px;
  }
  
  .quick-nav, .faq-category, .contact-support {
    padding: 20px;
  }
  
  .category-header h2 {
    font-size: 1.5rem;
  }
}
</style>
  